<template>
	<view class="login">
		<view class="login-top bg-active">
			<view class="desc">
				<view class="title">航天科苑</view>
				<text>助手管理端</text>
			</view>
			<image style="border-radius: 20rpx;" class="login-pic" src="/static/img/logo.png"></image>
		</view>
		<view class="login-type-content">
			<image class="login-bg" src="/static/img/login-bg.png" style="height: 94vw"></image>
			<view class="main">
				<view class="login-type-form">
					<view class="input-item">
						<!-- <text class="iconfont iconzhanghuffffffpx"></text> -->
						<u-icon name="account-fill" size="40rpx" color="#009688" :custom-style="iconStyle"></u-icon>
						<u-field label-width=0 type="text" class="login-type-input" name="account"
							v-model="loginParams.account" placeholder="请输入登录账号" maxlength="11" />
					</view>
					<view class="input-item">
						<u-icon name="lock-fill" size="40rpx" color="#009688" :custom-style="iconStyle"></u-icon>
						<u-field label-width=0 class="login-type-input" type="password" v-model.trim="password"
							placeholder="请输入密码" maxlength="20" />
					</view>
				</view>
				<button class="confirm-btn bg-active" :disabled="btnLoading" :loading="btnLoading" @tap="toLogin">
					登录
				</button>
			</view>
		</view>
		<view class="login-type-bottom text-active">
			西安恒软信息科技有限公司
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import md5Libs from "uview-ui/libs/function/md5";
	export default {
		data() {
			const notnull = /\s*\S+?/
			return {
				iconStyle: {
					position: 'absolute',
					left: 0,
					top: '25rpx'
				},
				password: '',
				loginParams: {
					account: '',
					password: ''
				},
				btnLoading: false
			};
		},
		datarow() {
			password: [{
				pattern: notnull,
				message: "请输入非空字符",
				tigger: 'blur'
			}]
		},
		onShow() {
			// 从本地缓存中读取公司编码和登录账号
			this.loginParams.account = uni.getStorageSync('account') || '';
			const expireTimeStr = uni.getStorageSync('expireTime');
			if (expireTimeStr) {
				const expireTime = new Date(parseInt(expireTimeStr)).getTime();
				const currentTime = new Date().getTime();
				if (currentTime > expireTime) {
					// 账号过期，需要重新登录
					uni.removeStorageSync('account');
					uni.removeStorageSync('expireTime');
					// 引导用户重新登录
				} else {
					// 账号未过期，继续使用登录状态
					this.loginParams.account = uni.getStorageSync('account')
				}
			} else {
				this.loginParams.account = ''
			}
		},



		methods: {
			// 提交表单
			async toLogin() {
				if (!this.loginParams.account) {
					this.$refs.uToast.show({
						title: '请输入登录账号',
						type: 'error'
					})
					return
				}
				if (!this.password) {
					this.$refs.uToast.show({
						title: '请输入登录密码',
						type: 'error'
					})
					return
				}
				var tonulength = this.password.split(" ").join("").length
				var iplength = this.password.length
				if (iplength != tonulength) {
					this.$refs.uToast.show({
						title: '请输入非空字符',
						type: 'error'
					})
					return
				}

				let params = this.loginParams
				params.password = md5Libs.md5(this.password)
				let res = await this.$u.api.login(params);
				console.log("login",res)
				const {token} = res.data
				if (token) {
					uni.setStorageSync('account', this.loginParams.account);
					uni.setStorageSync('token', token)
					let user = await this.$u.api.getInfo();
					console.log(user)
					uni.setStorageSync('userInfo', user.data.userInfo)
					this.$refs.uToast.show({
						isTab: true,
						title: '登录成功',
						type: 'success',
						url: '/pages/index/index'
					})
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.login {
		width: 100%;
		position: relative;

		.bg-active {
			background-color: $base-color;
			color: #fff;
		}

		.text-active,
		.iconfont {
			color: $base-color;
		}

		.back-btn {
			position: absolute;
			left: 40rpx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40rpx;
			font-size: 48rpx;
			color: #fff;
		}

		.login-top {
			height: 460rpx;
			position: relative;

			.desc {
				color: #fff;
				position: absolute;
				top: 200rpx;
				left: 40rpx;
				font-size: 48rpx;

				.title {
					font-size: 48rpx;
				}
			}

			.login-pic {
				position: absolute;
				width: 145rpx;
				height: 145rpx;
				right: 50rpx;
				top: 160rpx;
			}
		}

		.login-type-content {
			position: relative;
			top: -72rpx;

			.login-bg {
				width: 94vw;
				height: 94vw;
				margin: 0 3vw;
			}

			.main {
				width: 94vw;
				position: absolute;
				top: 0;
				left: 3vw;

				.nav-bar {
					display: flex;
					height: 100rpx;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 10;

					.nav-bar-item {
						flex: 1;
						display: flex;
						height: 100%;
						line-height: 96rpx;
						font-size: 32rpx;
						display: flex;
						margin: 0 120rpx;
						justify-content: center;
					}

					.nav-bar-item-active {
						border-bottom: 5rpx solid;
					}
				}

				.login-type-form {
					width: 80%;
					margin: 50rpx auto;

					.input-item {
						position: relative;
						height: 90rpx;
						line-height: 90rpx;
						margin-bottom: 30rpx;
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 50rpx;
							position: absolute;
							left: 0;
						}

						.login-type-input {
							height: 90rpx;
							padding-left: 80rpx;
							// border-bottom: 1rpx solid rgba(0, 0, 0, .1);
						}

						.sms-code-btn,
						sms-code-resend {
							width: 240rpx;
							font-size: 26rpx;
						}
					}
				}

				.login-type-tips {
					padding: 0 50rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28upx;
					color: #666;
				}

				.confirm-btn {
					margin-top: 60upx;
					width: 80%;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}

		.login-type-bottom {
			width: 100%;
			padding-bottom: 30rpx;
			text-align: center;
			font-size: 32rpx;
		}

		// 发送验证码样式
		.input-item-sms-code {
			.input-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.sms-code-btn {
				width: 200upx;
				background-color: #fff;
				display: flex;
				padding: 15upx 0;
				justify-content: center;
				align-items: center;
				border-radius: 12upx;
			}

			.sms-code-resend {
				color: #666;
			}
		}
	}
</style>
